<template>
	<view class="box">
		<view class="answerbox" v-if="flag==1">
			<view class="onetitle">违规如何申诉?</view>
			<view class="twotitle">一、为什么被处罚?</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">因发布违规内容而被用户举报，包括但不限于色情，反政，言语攻击等言辞。</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt40">因和用户产生交易纠纷，并被对方举报，系统判定你为责任方，则进行处罚。</p>
			</view>


			<view class="twotitle">二、如何申诉? </view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">超过三次处罚，该微信账号将永久封禁，不可申诉</p>
			</view>
			<!-- <p class="mt40 pl60">(申诉条件:<text>您提供已经退款买家的支付宝订单号，或者双方协商一致的微信举证号进行举证申诉)</text></p>
			<view class="tips">
				<text>*温馨提醒:</text>双方协商一致的阿里旺旺举证号，需要展示的是钱货已经完全解决好无问题的聊天内容，比如协商退货退款，那要在举证号内明确已经完成了退货且退款已经收到。
			</view> -->
		</view>
		<view class="answerbox" v-if="flag==2">
			<view class="onetitle">共享商品交易流程?</view>
			<view class="twotitle">一、如何发布共享商品?</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">请在首页点击发布按钮，进入发布页面。</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt40">选择上方的共享商品，并依次填写相关信息（共享商品一律一金币，不分贵贱，各求所需）。</p>
			</view>

			<view class="twotitle">二、如何购买? </view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">您在首页看到的商品，只要显示为一金币，则该商品为共享商品，点击进入商品详情页</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">若商品满意，则点击下方的我想要，和卖家进行沟通</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">进入聊天页面后，和卖家沟通好交易时间和地点，随后当面验货</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">验货后若满意，则在交易列表里找到该商品，点击确认收货，不满意则点击取消，各回各家</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">点击确认收货时，卖家需要输入对方的交易码，而买家点击收货不需要输入。取消订单时相反，买家需要输入交易码，卖家不需要</p>
			</view>
			<!-- <p class="mt40 pl60">(申诉条件:<text>您提供已经退款买家的支付宝订单号，或者双方协商一致的微信举证号进行举证申诉)</text></p>
			<view class="tips">
				<text>*温馨提醒:</text>双方协商一致的阿里旺旺举证号，需要展示的是钱货已经完全解决好无问题的聊天内容，比如协商退货退款，那要在举证号内明确已经完成了退货且退款已经收到。
			</view> -->
		</view>

		<view class="answerbox" v-if="flag==3">
			<view class="onetitle">普通商品交易流程?</view>
			<view class="twotitle">一、如何发布普通商品?</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">请在首页点击发布按钮，进入发布页。</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt40">选择上方的售卖商品，并依次填写相关信息（普通商品可以自己设定售价）。</p>
			</view>

			<view class="twotitle">二、如何购买? </view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">您在首页看到的商品，只要显示一定的价钱，则该商品为售卖商品，点击进入商品详情页</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">若商品满意，则点击下方的我想要，和卖家进行沟通</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">进入聊天页面后，和卖家沟通好交易时间和地点，随后当面验货</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">验货后若满意，则在交易列表里找到该商品，点击确认收货，不满意则点击取消，各回各家</p>
			</view>
			<view class="notice-box">
				<view class="dot"></view>
				<p class="mt10">点击确认收货时，卖家需要输入对方的交易码，而买家点击收货不需要输入。取消订单时相反，买家需要输入交易码，卖家不需要</p>
			</view>
			<!-- <p class="mt40 pl60">(申诉条件:<text>您提供已经退款买家的支付宝订单号，或者双方协商一致的微信举证号进行举证申诉)</text></p>
			<view class="tips">
				<text>*温馨提醒:</text>双方协商一致的阿里旺旺举证号，需要展示的是钱货已经完全解决好无问题的聊天内容，比如协商退货退款，那要在举证号内明确已经完成了退货且退款已经收到。
			</view> -->
		</view>

		<u-divider text="是否有解决您的问题?"></u-divider>

		<view class="flex btnbox">
			<u-button icon="thumb-up" @click="toggleActive('resolved')"
				:color="isActive === 'resolved' ? '#4F00FF' : ''" size="small" plain shape="circle" text="已解决"
				:customStyle="{'width': '240rpx','marginRight': 0}"></u-button>
			<u-button icon="thumb-down" @click="toggleActive('notResolved')"
				:color="isActive === 'notResolved' ? '#4F00FF' : ''" size="small" plain shape="circle" text="未解决"
				:customStyle="{'width': '240rpx'}"></u-button>
		</view>

		<!-- 卡片 start -->
		<view class="section">
			<view class="title">您可能还想了解</view>
			<view class="itembox"  @click="turnTo(2)" v-if="flag!=2">
				<view class="left">
					<text>关于共享商品下单流程问题</text>
				</view>
				<uni-icons type="arrowright" color="#606060" size="16"></uni-icons>
			</view>
			<view class="itembox" @click="turnTo(3)" v-if="flag!=3">
				<view class="left">
					<text>关于售卖商品下单流程问题</text>
				</view>
				<uni-icons type="arrowright" color="#606060" size="16"></uni-icons>
			</view>
			<view class="itembox"  @click="turnTo(1)" v-if="flag!=1">
				<view class="left">
					<text>关于申诉问题</text>
				</view>
				<uni-icons type="arrowright" color="#606060" size="16"></uni-icons>
			</view>
		</view>
		<!-- 卡片 end -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				flag: 0,
				isActive: '',
			};
		},
		onLoad(e) {
			this.flag = e.flag
		},
		onShow() {},
		methods: {
			toggleActive(status) {
				this.isActive = status;
			},
			turnTo(flag){
			 uni.navigateTo({
			    url: '/pages/mine/problemsolving?flag=' + flag
			  });
			}
		}
	}
</script>

<style lang="scss">
	.answerbox {
		padding: 30rpx 40rpx 0;
		box-sizing: border-box;
		color: #000;

		.onetitle {
			font-size: 32rpx;
			line-height: 2;
		}

		.twotitle {
			font-size: 28rpx;
			line-height: 2;
		}

		.notice-box {
      padding-left: 60rpx;
      color: #464646;
      line-height: 1.5;
      text-align: justify;
		}

		p {
			font-size: 24rpx;
			color: #525252;
			line-height: 1.5;
			letter-spacing: 2rpx;

			text {
				color: #7B68E7;
			}
		}

		.dot {
      width: 7rpx;
      height: 7rpx;
      background: #525252;
      border-radius: 50%;
      margin-right: 6rpx;
      float: left;
      transform: translateY(7px);
		}

		.mt40 {
			margin-bottom: 40rpx;
		}

		.mt10 {
			margin-bottom: 10rpx;
		}

		.pl60 {
			padding-left: 60rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #525252;
			line-height: 1.5;
			margin-bottom: 80rpx;

			text {
				color: #000;
			}
		}
	}

	.section {
		background-color: #fff;
		margin: 0 auto;
		padding: 30rpx 16rpx;
		box-sizing: border-box;

		.title {
			text-align: left;
			font-size: 32rpx;
			color: #000;
			line-height: 2.5;
		}
	}

	.btnbox {
		.u-button {
			color: red;
		}
	}

	.itembox {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.left {
		display: flex;
		justify-content: start;
		align-items: center;
		padding: 0;
		background-color: transparent;
		height: auto;
		line-height: normal;
		border: none;
		width: 100%;
		font-size: inherit;

		&:before,
		&:after {
			border: none;
		}

		text {
			color: #262626;
		}
	}
</style>
